<template>
	<view class="address">
		<TopHead :title="'地址管理'"></TopHead>
		<view class="conbox">

			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item class="swiper-item" v-for="(item, index) in swipeList"
					:right-options="item.options" :key="item.id" @change="swipeChange($event, index)"
					@click="swipeClick($event, index,item)">
					<view class="content-box">
						<view class="itemBox">
							<view class="left">
								<view class="icon-box">
									<!-- <uni-icons class="icon" color="#fff" type="paperplane" size="20"></uni-icons> -->
									<image src="../../static/img/address-icon.png"></image>
								</view>
							</view>

							<view class="textView" @click="choiceAddress(item)">
								<view class="title1">
									{{item.name}} <text class="phone">{{item.phone}}</text>
									<text v-if="item.defaultStatus==1" class="moren">默认</text>
								</view>
								<view class="title2">{{item.region}} {{item.address}}</view>
							</view>
							<view class="title3" @click="addAddress2(item)"><uni-icons type="compose" color="#c2c2c2"
									size="15"></uni-icons><text>编辑</text>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="addBox">
			<view class="submitBtn" @click="addAddress()">新增地址</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popupBox">
				<image class="icon-tz1" src="../../static/images/icon-tz1.png"></image>
				<view class="popup-title">
					<view class="fenge"></view>
					<view>确定删除</view>
					<view class="fenge"></view>
				</view>
				<view class="popupTitle">确定要删除该地址吗？</view>
				<view class="delBtn1" @click="confirmDelete()">确认</view>
				<view class="delBtn2" @click="close">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				list: [], // 列表
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				swipeList: [],
				deleteId: '', // 删除id
				orderAddress: 0, // 是否订单详情跳转而来   true是
				latitude: 0, // 纬度
				longitude: 0, // 经度
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.orderAddress == 1) {
				this.orderAddress = options.orderAddress
			}
		},
		onShow() {

			this.page = 1
			this.total = 0
			this.swipeList = []
			this.toLocation()
			//this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
				this.initData()
			}
		},
		methods: { // 获取经纬度
			toLocation() {
				let _this = this
				// let locations = this.info.serviceOrderInfo.locations
				// locations = locations.split(',')
				// console.log(locations)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude; // 纬度
						const longitude = res.longitude; // 经度
						_this.latitude = latitude
						_this.longitude = longitude
						console.log(res)
						_this.initData()
					}
				});
			},
			init() {
				let options = [{
						text: '设为默认',
						style: {
							backgroundColor: '#f1f1f1',
							size: '24rpx',
							color: '#040404',
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(255,58,49)'
						}
					}
				]
				let list = [{
						name: '穆里尼奥',
						phone: '150-XXXX-7812',
						address: '重庆市南岸区海棠和鸿南山道18栋鸿南山道18栋',
						id: 2
					},
					{
						name: '郑毅',
						phone: '150-XXXX-7812',
						address: '重庆市南岸区海棠和鸿南山道18栋鸿南山道19栋',
						id: 2
					},
				]
				for (let i = 0; i < list.length; i++) {
					list[i].options = options
				}
				this.swipeList = list
				console.log(this.swipeList)
				this.$refs.swipeAction.resize()
			},
			// 数据请求示例
			initData() {
				let _this = this;
				let data = {
					userId: uni.getStorageSync('id'),
					page: this.page,
					pageSize: this.pageSize
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/address/',
					method: 'GET',
					data: data,
					success(res) {
						console.log(res)
						let options = [{
								text: '设为默认',
								style: {
									backgroundColor: '#f1f1f1',
									size: '24rpx',
									color: '#040404',
								}
							},
							{
								text: '删除',
								style: {
									backgroundColor: 'rgb(255,58,49)'
								}
							}
						]
						let list = res.data.list
						console.log(list)

						for (let i = 0; i < list.length; i++) {
							list[i].options = options
						}
						console.log(list)
						// return
						let swipeList = _this.swipeList
						_this.swipeList = [...swipeList, ...list]
						_this.total = res.data.total
						console.log(_this.swipeList)
						_this.$refs.swipeAction.resize()

					}
				})
			},

			// 弹窗
			open() {
				this.$refs.popup.open('center')
			},
			// 确认删除
			confirmDelete() {
				let _this = this
				console.log(this.deleteId)
				_this.$http.fetchData({
					url: '/wechatApplet/customer/address/' + _this.deleteId,
					method: 'DELETE',
					data: {},
					success(res) {
						console.log(res)
						_this.$refs.swipeAction.closeAll()
						_this.page = 1
						_this.total = 0
						_this.swipeList = []
						_this.initData()
					}
				})

			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
				this.$refs.swipeAction.closeAll()
			},
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			swipeClick(e, index, item) {
				let {
					content
				} = e;
				let _this = this
				if (content.text === '删除') {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '是否删除',
					// 	success: res => {
					// 		if (res.confirm) {
					// 			this.swipeList.splice(index, 1);
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
					this.deleteId = item.id
					this.$refs.popup.open('center')

				} else if (content.text === '添加') {
					if (this.swipeList.length < 10) {
						this.swipeList.push({
							id: new Date().getTime(),
							options: [{
									text: '置顶'
								},
								{
									text: '标记为已读',
									style: {
										backgroundColor: 'rgb(254,156,1)'
									}
								},
								{
									text: '删除',
									style: {
										backgroundColor: 'rgb(255,58,49)'
									}
								}
							],
							content: '新增' + new Date().getTime()
						});
						uni.showToast({
							title: `添加了一条数据`,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: `最多添加十条数据`,
							icon: 'none'
						});
					}
				} else if (content.text === '设为默认') {
					console.log(item)
					let data = {
						name: item.name,
						phone: item.phone,
						region: item.region,
						userId: item.userId,
						address: item.address,
						id: item.id,
						defaultStatus: 1
					}
					console.log(data)
					_this.$http.fetchData({
						url: '/wechatApplet/customer/address/',
						method: 'PUT',
						data: data,
						success(res) {
							console.log(res)
							_this.$refs.swipeAction.closeAll()
							_this.page = 1
							_this.total = 0
							_this.swipeList = []
							_this.initData()
						}
					})

				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},
			addAddress() {
				uni.navigateTo({
					url: `/pages_category_page1/mine/addAddress`
				})
			},
			addAddress2(item) {
				console.log(item)
				// return
				let id = item.id

				let paramsStr = `?item=${JSON.stringify(item)}`
				uni.navigateTo({
					url: `/pages_category_page1/mine/addAddress${paramsStr}`
				})
			},
			// 点击确认默认选并返回上一页
			choiceAddress(item) {
				let _this = this
				if (this.orderAddress == 1) {
					console.log(item)
					let data = {
						name: item.name,
						phone: item.phone,
						region: item.region,
						userId: item.userId,
						address: item.address,
						id: item.id,
						defaultStatus: 1
					}
					console.log(data)
					_this.$http.fetchData({
						url: '/wechatApplet/customer/address/',
						method: 'PUT',
						data: data,
						success(res) {
							console.log(res)
							_this.$refs.swipeAction.closeAll()
							_this.$nextTick(() => {
								uni.navigateBack({
									delta: 1
								});
							})

						}
					})



				}
			}

		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.swiper-item {}

	.conbox {
		padding: 30rpx;
		padding-top: 196rpx;
		padding-bottom: 360rpx;
	}

	.content-box {
		/* margin-bottom: 20rpx; */
	}

	.itemBox {
		display: flex;
		padding: 30rpx 24rpx;
		padding-right: 0;

	}

	.left {
		width: 62rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-box {
		width: 62rpx;
		height: 62rpx;
		background: linear-gradient(180deg, #f8deb1, #efbe77);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.icon-box image {
		width: 62rpx;
		height: 62rpx;
		/* background: linear-gradient(180deg, #f8deb1, #efbe77); */
		border-radius: 50%;
	}

	.textView {
		flex: 1;
		padding-left: 26rpx;

	}

	.title3 {
		width: 120rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
	}

	.title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1 .phone {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #5d4529;
		margin-left: 16rpx;
		margin-right: 12rpx;
	}

	.title1 .moren {
		line-height: 40rpx;
		background: #ffe6d1;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		padding: 4rpx 18rpx;
		display: inline-block;
	}

	.title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 16rpx;
	}

	.addBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.submitBtn {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 42rpx;
		text-align: center;
		margin: 0 auto;
		width: 590rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		margin-bottom: 242rpx;
	}

	.popupBox {
		width: 690rpx;
		height: 688rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
		background: linear-gradient(180deg, #ffead6, #ffffff);
		border-radius: 10rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.22);
	}

	.icon-tz1 {
		width: 176rpx;
		height: 224rpx;
		margin: 0 auto;
		display: block;
		margin-top: 16rpx;
	}

	.popup-title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 99rpx;
		margin: 20rpx 0;
	}

	.popup-title>view {
		flex: 1;
		font-size: 40rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #161719;
		line-height: 60rpx;
		text-align: center;
	}

	.popup-title>view:nth-child(2) {
		margin: 0 24rpx;
		flex: 1.5;
	}

	.fenge {
		background: #979797;
		height: 2rpx;
	}

	.popupTitle {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #000000;
		line-height: 56rpx;
	}

	.delBtn1 {
		width: 578rpx;
		height: 98rpx;
		background: #e47917;
		border-radius: 20rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 60rpx;
	}

	.delBtn2 {
		width: 578rpx;
		height: 98rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		line-height: 56rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>
<style>
	.address .uni-swipe {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		margin-bottom: 20rpx;
	}
</style>